<!-- Handle markdown -->
<script src="/assets/js/marked.min.js"></script>

<!-- Player -->
<div id="player" class="container mx-auto px-4 py-4 text-center items-center">
	<flex class="container items-center justify-center gap-3">
		<div class="container items-center justify-center">
			<!-- TODO: figure out how to make this fit without scrollbars being needed... -->
			<iframe class="m-auto w-full h-screen" frameborder="0" scrolling="no" src="/hosted/projects_public/{{ .ID }}/"
				allowfullscreen="true" allow="autoplay; clipboard-write;" referrerpolicy="same-origin"></iframe>
				
		</div>
		<div class="flex flex-row items-center justify-center gap-2 pb-5 pt-5">
			<img src="/assets/static/img/ui/placeholder_user.png" alt="Profile Image" class="w-10 h-10">
			<h2 class="text-xl font-bold dark:text-white">{{ .DeveloperName }}</h2>
		</div>
		<div class="flex flex-row items-center justify-center gap-2 pb-7">
			<h1 class="text-5xl font-bold dark:text-white">{{ .GameName }}</h1>
		</div>
		<div class="container bg-white dark:bg-gray-800 p-4 rounded-xl bg-gray-100 dark:bg-gray-700 dark:text-white">
			<h2 class="text-2xl font-bold dark:text-white pb-2">Description</h2>
			<p>{{ .GameDescription }}</p>
			<h2 class="text-2xl font-bold dark:text-white pt-5 pb-5">Features</h2>
			<div class="flex flex-row flex-wrap items-center justify-center pb-2">
				{{ range .Features }}
					{{ template "feature_elem" . }}
				{{ end }}
			</div>
		</div>
		<div class="flex flex-row items-center justify-between gap-2 w-auto mx-2 my-5 dark:text-white">
			<p>© 1 April 2025.</p>
			<button type="button"
				class="open-modal-button px-3 py-2 rounded-xl ring-1 ring-inset ring-gray-300 dark:ring-gray-600 bg-gray-100 dark:bg-gray-700 hover:bg-red-400 dark:hover:bg-red-400 hover:text-white hover:font-bold dark:text-white transition-all duration-200"
				data-item-id="{{ .ID }}">
				<span class="flex items-center justify-center gap-2">

					<!-- TODO: replace this placeholder svg (It's taken directly from Scratch) -->
					<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg"
						xmlns:xlink="http://www.w3.org/1999/xlink">
						<defs />
						<g id="report-white" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
							<path
								d="M9.93975407,12.6597613 C8.46423356,12.6597613 7.2696347,13.8543601 7.2696347,15.3298806 C7.2696347,16.8054011 8.46423356,18 9.93975407,18 C11.4152746,18 12.6098734,16.8054011 12.6098734,15.3298806 C12.6098734,13.8543601 11.4152746,12.6597613 9.93975407,12.6597613 M11.4725499,10.2269663 C10.7934286,11.7478886 9.08607954,11.7478886 8.40695827,10.2269663 L6.23867952,5.39847481 C5.55955826,3.88804156 6.41050539,2 7.77147532,2 L12.1080328,2 C13.4690027,2 14.3199499,3.88804156 13.6408286,5.39847481 L11.4725499,10.2269663 Z"
								id="Fill-1" fill="#FFFFFF" />
						</g>
					</svg>
					Report
				</span>
			</button>
		</div>

		<!-- <div class="container">
			<h2 class="text-4xl font-bold dark:text-white pb-8">Comments</h2>
			<div class="flex items-start space-x-4 mb-4 w-auto bg-white dark:bg-gray-800 p-4 rounded-xl bg-gray-100 dark:bg-gray-700 dark:text-white border-2 border-gray-300 dark:border-gray-600">
				<img src="/assets/static/img/placeholder.png" alt="Profile Image" class="flex max-w-12 m-2 rounded-xl flex-shrink-0">
				<div class="flex flex-col items-start gap-2">
					<textarea class="w-full text-left" id="comment_text"></textarea>
				</div>
			</div>
			{{ range .Comments }}
				{{ template "comment" . }}
			{{ end }}
		</div> -->
	</flex>
</div>

<!-- Use to handle modals -->
<script src="/assets/js/modals.js"></script>

<!-- Very basic cheat mitigation. This is not very good but it's better than nothing. -->
<script id="playcheck">!function(){function a(){let b=!1,c=1,d=new Date,e=d.getTime(),f=new Date,g=f-e;if(!(b||isNaN(f)||f>c)){b=!0;document.getElementById("player").remove();const h=document.createElement("div"),i=document.createElement("h1"),j=document.createElement("p");h.className="flex flex-col items-center justify-center gap-2 w-auto mx-2 my-5 dark:text-white",i.className="text-5xl font-bold",i.textContent="Oops! That's not allowed.",j.className="text-2xl font-underline",j.textContent="It's not cool to cheat. Reload the page to play again.",h.appendChild(i),h.appendChild(j),document.getElementById("main").appendChild(h),document.getElementById("playcheck").remove()}}window.addEventListener("load",a),window.addEventListener("resize",a),window.addEventListener("mousemove",a),window.addEventListener("focus",a),window.addEventListener("blur",a)}();</script>